
                <section class="row">
                    <div class="col-12">
                        <div>
                            <h1>Form Wizard</h1>
                        </div>
                        <div>
                            <ol class="breadcrumb">
                                <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                                <li>Forms</li>
                                <li class="active">Form Wizard</li>
                            </ol>
                        </div>
                    </div>
                </section>
                
            <div class="ajax-container">
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Form Wizard</h3>
                            </div>
                            <div class="panel-body form-container">

                                <h3>Breadcrumb</h3>
                                <ol class="breadcrumb wizard-step">
                                    <li class="step active"><a href="#">Home</a></li>
                                    <li class="step"><a href="#">Library</a></li>
                                    <li class="step"><a href="#">Data</a></li>
                                </ol>

                                <ul class="breadcrumb wizard-step">
                                    <li class="step"><a href="#">Home</a></li>
                                    <li class="step"><a href="#">Library</a></li>
                                    <li class="step active">Data</li>
                                </ul>

                                <div class="wizard-step">
                                    <a href="" class="step">Home</a>
                                    <a href="" class="step">Library</a>
                                    <a href="" class="step">Data</a>
                                </div>
                                
                                <div class="wizard-step">
                                    <div class="step">
                                        <a href="">Home</a>
                                    </div>
                                    <div class="step">
                                        <a href="">Library</a>
                                    </div>
                                    <div class="step">
                                        <a href="">Data</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </section>
                
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Advance Form Wizard</h3>
                            </div>
                            <div class="panel-body form-container">
                                <div class="guideline form-guideline guideline-sticky bg-info">
                                    <i class="fa fa-info-circle fa-lg"></i> Fields marked with <code>*</code> are required.
                                </div>
                                
                                <div class="wizard-step">
                                    <a class="step active" data-step="personal-info"> Personal Information</a>
                                    <a class="step" data-step="account-info"> Account Information</a>
                                    <a class="step" data-step="additional-info"> Additonal Information</a>
                                    <a class="step" data-step="summary"> Summary</a>
                                </div>
                                
                                <form id="form-wizard" action="<?= base_url() ?>services/cms-validation" method="post" class="form-bordered form-horizontal">

                                    <fieldset id="personal-info" class="step">
                                        <legend>Personal Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="photo" class="control-label col-3">
                                                    Photo <br>
                                                    <small>(.jpg .png .gif)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                                <img src="http://localhost/ci_bootstrap/resources/images/no_image.gif" data-src="http://localhost/ci_bootstrap/resources/images/no_image.gif" alt="...">
                                                            </div>
                                                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                                            <div>
                                                                <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input name="photo" id="photo" type="file"></span>
                                                                <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="first-name" class="control-label col-3">
                                                    First Name* <br>
                                                    <small>(alpha characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="first-name" id="first-name" class="form-control" placeholder="Mark Angelo">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="last-name" class="control-label col-3">
                                                    Last Name* <br>
                                                    <small>(alpha characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="last-name" id="last-name" class="form-control" placeholder="Angulo">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="birthdate" class="control-label col-3">
                                                    Birth Date* <br>
                                                    <small>(mm/dd/yyyy)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                            <input type="text" name="birthdate" id="birthdate" class="form-control" placeholder="Birth Date">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="gender" class="control-label col-3">
                                                    Gender* <br>
                                                    <small>(male/female)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="gender" value="Male" checked="checked">Male</label>
                                                        </div>
                                                        <div class="radio">
                                                            <label class="control-label"><input type="radio" name="gender" value="Female">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>

                                    <fieldset id="account-info" class="step">
                                        <legend>Account Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="username" class="control-label col-3">
                                                    Username* <br>
                                                    <small>(must be unique)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                            <input type="text" name="username" id="username" class="form-control" placeholder="Username">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="email" class="control-label col-3">
                                                    Email* <br>
                                                    <small>(must be unique)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                                            <input type="text" name="email" id="email" class="form-control" placeholder="markangeloangulo@gmail.com">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="password" class="control-label col-3">
                                                    Password* <br>
                                                    <small>(pci password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                            <input type="password" name="password" id="password" class="form-control" placeholder="P4ssw0rd">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="confirm-password" class="control-label col-3">
                                                    Confirm Password* <br>
                                                    <small>(must match with password)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-unlock"></i></span>
                                                            <input type="password" name="confirm-password" id="confirm-password" class="form-control" placeholder="Retype Password">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>

                                    <fieldset id="additional-info" class="step">
                                        <legend>Additional Information</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="mobile" class="control-label col-3">
                                                    Mobile <br>
                                                    <small>(Philippine format)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                                                            <input type="text" name="mobile" id="mobile" class="form-control" placeholder="(+63)926-408-5811">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="address" class="control-label col-3">
                                                    Address <br>
                                                    <small>(alpha-numeric characters)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-home"></i></span>
                                                            <input type="text" name="address" id="address" class="form-control" placeholder="#143 Purok 15, Irisan Baguio City">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="country" class="control-label col-3">
                                                    Country <br>
                                                    <small>(Select One)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="country" id="country" class="form-control">
                                                                <option value="" selected="selected"> - Select Country - </option>
                                                                <option value="PH">Philippines</option>
                                                                <option value="US">United States</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="about" class="control-label col-3">
                                                    About <br>
                                                    <small>(Optional)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <textarea name="about" id="vertical-about" class="form-control" placeholder="About..."></textarea>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>

                                    <fieldset id="summary" class="step">
                                        <legend>Summary</legend>
                                        <ul id="summaryContainer">

                                        </ul>
                                    </fieldset>
                                    
                                    <div class="submit-group col-12 align-right">
                                        <input type="reset" name="reset" class="btn btn-danger" value="Reset">
                                        <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                                        <input type="button" name="cancel" class="btn btn-default" value="Cancel">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- page-script -->
                <script src="<?= base_url() ?>js/scripts/advance-form-wizard.js"></script>
            </div>